<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view></router-view>
    <!-- tabbar:导航菜单 -->
    <van-tabbar v-show="tabbarVisible" route v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item to="/index" icon="shop-o">首页</van-tabbar-item>
      <van-tabbar-item to="/cate" icon="list-switching">分类</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="cart-o" :badge="cartGoodsCount">购物车</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'App',
  computed: {
    ...mapGetters('cart', ['cartGoodsCount'])
  },
  watch: {
    '$route.path': function (newPath) {
      if (newPath == '/login' || newPath === '/reg') {
        this.tabbarVisible = false;
      }else{
        this.tabbarVisible=true;
      }
    }
  },
  data() {
    return {
      // 默认激活的导航菜单的索引
      active: 0,
      tabbarVisible: true
    }
  }
}
</script>

<style></style>
